<template>
  <el-aside v-loading="loading" width="350px">
    <el-container>
      <el-header>
        <el-input v-model="searchValue" clearable placeholder="输入菜单名称进行过滤"></el-input>
      </el-header>
      <el-main class="no-padding">
        <el-tree class="menu" node-key="id" ref="menuRef" show-checkbox check-strictly draggable :data="menuList"
                 :props="{children: 'children', label: 'name'}" :highlight-current="true" :expand-on-click-node="false"
                 :filter-node-method="handleFilterNodeMethod" :default-expanded-keys="expandedKeys"
                 @node-click="handleNodeClick">
          <template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">
									{{ node.label }}
								</span>
								<span class="do" v-if="data.category === 'DIRECTORY' || data.category === 'MENU'">
									<el-button icon="el-icon-plus" size="small"
                             @click.stop="handleAdd(data)" v-power="'system:menu:add'"></el-button>
								</span>
							</span>
          </template>
        </el-tree>
      </el-main>
      <el-footer>
        <div class="jcx-table-page">
          <div class="jcx-table-do">
            <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd(null)"
                       v-power="'system:menu:add'"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete"
                       v-power="'system:menu:del'"></el-button>
          </div>
        </div>
      </el-footer>
    </el-container>
  </el-aside>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import menuApi from "@/api/system/menu";
import modal from "@/utils/modal";
import treeUtil from "@/utils/tree";

const emit = defineEmits(['nodeClick', 'addClick', 'deleteClick']);

const menuRef = ref(null);
const loading = ref(false);
const searchValue = ref("");
const expandedKeys = ref([]);
const menuList = ref([]);

const handleFilterNodeMethod = (value, data) => {
  if (!value) return true;
  let targetText = data.name;
  return targetText.indexOf(value) !== -1;
}

const handleNodeClick = (data) => {
  menuApi.info.get(data.id, true).then(response => {
    emit('nodeClick', response.data);
  });
}

const handleAdd = (data) => {
  if (data === null) {
    emit('addClick', data);
  } else {
    menuApi.info.get(data.id, true).then(response => {
      emit('addClick', response.data);
    });
  }
}

const handleDelete = () => {
  let CheckedNodes = menuRef.value.getCheckedNodes();
  if (CheckedNodes.length === 0) {
    modal.warningMessage("请选择需要删除的菜单项");
    return false;
  }
  let menuIdList = CheckedNodes.map(item => item.id);
  emit('deleteClick', menuIdList);
}

const getMenuList = () => {
  loading.value = true;
  menuApi.lists.get({isExtend: true}).then(response => {
    menuList.value = treeUtil.buildTree(response.data.list);
    loading.value = false;
  })
}

const setNodeChecked = (id) => {
  menuRef.value.setCheckedKeys([], true);
  expandedKeys.value.push(id);
  menuRef.value.setCheckedKeys([id], true);
}

onMounted(() => {
  getMenuList();
})

watch(() => searchValue.value, (value) => {
  menuRef.value.filter(value);
});

defineExpose({getMenuList, setNodeChecked});
</script>

<style scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}

.custom-tree-node .label {
  display: flex;
  align-items: center;;
  height: 100%;
}

.custom-tree-node .label .el-tag {
  margin-left: 5px;
}

.custom-tree-node .do {
  display: none;
}

.custom-tree-node .do i {
  margin-left: 5px;
  color: #999;
}

.custom-tree-node .do i:hover {
  color: #333;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
